<!-- 公共百分比电池 -->
<template>
  <view>
    <view 
      class="info-item" 
      :class="{ 'no-border': index === deviceInfoList.length - 1 }" 
      v-for="(item, index) in deviceInfoList" 
      :key="index"
    >
      <text class="info-label">{{ item.title }}</text>
      <view class="info-value">
        <!-- 为第一个 text 元素添加 red-text 类 -->
        <text :class="['battery', index === 0 ? 'red-text' : 'orange-text']">{{ item.battery }}</text>
        <image :src="musicImages[index]" class="item-img"></image>   
        <text class="type">{{ item.type }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import img1 from '/static/imgs/eq_info.png';
import img2 from '/static/imgs/dianliang.png';

defineProps({
  deviceInfoList: {
    type: Array,
    required: true
  }
});

const musicImages = ref([
  img1, // 异常设备图片1
  img2, // 异常设备图片2
]);
</script>

<style scoped>
.info-item {
  display: flex;
  justify-content: space-between;
  padding: 30rpx;
}

/* 为不包含 "no-border" 类的列表项添加底部边框 */
.info-item:not(.no-border) {
  border-bottom: 2rpx solid #f0f0f0;
}

.info-label {
  font-size: 32rpx;
}

.info-value {
  font-size: 32rpx;
  color: #333;
  display: flex;
  align-items: center;
}

.battery {
  margin-right: 20rpx;
}

.item-img {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}

.imei {
  margin-left: 20rpx; /* 添加左边距，使布局更美观 */
}

/* 设置红色文本样式 */
.red-text {
  color: #FF0000; /* 红色 */
}

/* 设置橙色文本样式 */
.orange-text {
  color: #FFA500; /* 橙色 */
}
.type{
	color: #ccc;
}
</style>